<template>
<div class="app-container calendar-list-container">

<el-row>
  <el-col :span="16" style='margin-top:15px;'>
    <el-form :rules="rules" label-width="80px" :model="form" ref="form">
      <el-form-item label="手机号" prop="mobile">
          <el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="红包活动" prop="actId">
        <el-input v-model="form.actId" placeholder="请选择红包活动" v-on:click.native="handlerChooseActivity"></el-input>
      </el-form-item>
      <el-form-item label="红包" prop="couponId">
        <el-input v-model="form.couponId" placeholder="请选择红包" v-on:click.native="handlerChooseCoupon"></el-input>
      </el-form-item>
      <el-form-item label="触发事件" prop="incCode">
        <el-input v-model="form.incCode" placeholder="请选择触发事件" v-on:click.native="handlerChooseIncident"></el-input>
      </el-form-item>
      <el-form-item v-if="couType=='1'" label="订单号" prop="merOrderNo">
          <el-input v-model="form.merOrderNo" placeholder="请输入订单号"></el-input>
      </el-form-item>
      <el-form-item v-if="couType=='1'" label="订单金额" prop="orderAmt">
          <el-input v-model="form.orderAmt" placeholder="请输入订单金额"></el-input>
      </el-form-item>
      <el-button type="primary" @click="rev('form')">领取</el-button>
    </el-form>
  </el-col>
</el-row>

  <!-- 活动列表 -->
  <el-dialog :title="textMap[dialogStatus1]" :visible.sync="dialogActVisible">
    <div v-for="act in activityList" v-bind:key="act.actInfo">
      <input type="radio" name="activaty" id="activaty" :value=act.actId v-model="checkedAct" v-bind:key="act.actInfo">
      <label for="activaty">{{act.actInfo}}</label>
    </div>
    <br>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelAct('dialogActVisible')">取 消</el-button>
      <el-button type="primary" @click="selectedAct('dialogActVisible')">确 定</el-button>
    </div>
  </el-dialog>

  <!-- 红包列表 -->
  <el-dialog :title="textMap[dialogStatus1]" :visible.sync="dialogCouVisible">
    <div v-for="cou in couponList">
      <input type="radio" name="coupon" id="coupon" :value=cou v-model="checkedCou" v-bind:key="cou.couId">
      <label for="coupon">{{cou.couName}}</label>
    </div>
    <br>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelCou('dialogCouVisible')">取 消</el-button>
      <el-button type="primary" @click="selectedCou('dialogCouVisible')">确 定</el-button>
    </div>
  </el-dialog>

  <!-- 事件列表 -->
  <el-dialog :title="textMap[dialogStatus1]" :visible.sync="dialogIncVisible">
    <div v-for="inc in incidentList" v-bind:key="inc.incCode">
    <input type="radio" name="incident" id="incident" :value=inc.incCode v-model="checkedIncidents" v-bind:key="inc.incName">
    <label for="incident">{{inc.incName}}</label>
    </div>
    <br>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelIncident('dialogIncVisible')">取 消</el-button>
      <el-button type="primary" @click="selectIncident('dialogIncVisible')">确 定</el-button>
    </div>
  </el-dialog>
  </div>
</template>

<script>
import {
  couponRev, getAct, getCou, getInc
} from '@/api/biz/operative/marketCouponRev/index'
// import { mapGetters } from 'vuex'
export default {
  name: 'user',
  data() {
    return {
      formStatus: '',
      form: {
        mobile: '',
        actId: '',
        couponId: '',
        incCode: '',
        couType: '',
        merOrderNo: '',
        orderAmt: ''
      },
      actId: '',
      couponId: '',
      couType: '0',
      checkedAct: undefined,
      checkedCou: null,
      checkedIncidents: undefined,
      rules: {
        mobile: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          },
          {
            min: 11,
            max: 11,
            message: '长度必须为 11 个字符',
            trigger: 'blur'
          },
          {
            pattern: /^1[3|4|5|8|7|9][0-9]\d{4,8}$/,
            message: '输入手机号格式错误，请重新输入!'
          }
        ],
        actId: [
          {
            required: true,
            message: '请选择红包活动',
            trigger: 'blur'
          }
        ],
        couponId: [
          {
            required: true,
            message: '请选择红包',
            trigger: 'blur'
          }
        ],
        incCode: [
          {
            required: true,
            message: '请选择触发事件',
            trigger: 'blur'
          }
        ],
        merOrderNo: [
          {
            required: true,
            message: '请输入订单号',
            trigger: 'blur'
          }
        ],
        orderAmt: [
          {
            required: true,
            message: '请输入订单金额',
            trigger: 'blur'
          }
        ]
      },
      activityList: null,
      couponList: null,
      incidentList: null,
      dialogStatus1: '',
      dialogActVisible: false,
      dialogCouVisible: false,
      dialogIncVisible: false,
      textMap: {
        selectAct: '选择活动',
        selectCou: '选择红包',
        selectInc: '选择事件',
        rev: '领取'
      }
    }
  },

  methods: {
    handlerChooseActivity() {
      this.dialogActVisible = true
      this.dialogStatus1 = 'selectAct'
      getAct()
        .then(response => {
          this.activityList = response
        })
    },
    selectedAct(formName) {
      this.dialogActVisible = false
      this.form.actId = this.checkedAct
      this.actId = this.checkedAct
    },
    cancelAct(formName) {
      this.dialogActVisible = false
    },

    handlerChooseCoupon() {
      this.dialogCouVisible = true
      this.dialogStatus1 = 'selectCou'
      getCou(this.actId)
        .then(response => {
          this.couponList = response
        })
    },
    selectedCou(formName) {
      this.dialogCouVisible = false
      this.form.couponId = this.checkedCou.couId
      this.couponId = this.checkedCou.couId
      const self = this
      console.log(this.checkedCou.couId)
      console.log(this.checkedCou.couType)
      if (this.checkedCou.couType === '1') {
        self.couType = '1'
      } else {
        self.couType = '0'
      }
    },
    cancelCou(formName) {
      this.dialogCouVisible = false
    },

    handlerChooseIncident() {
      this.dialogIncVisible = true
      this.dialogStatus1 = 'selectInc'
      getInc(this.couponId)
        .then(response => {
          this.incidentList = response
        })
    },
    selectIncident(formName) {
      this.dialogIncVisible = false
      this.form.incCode = this.checkedIncidents
    },
    cancelIncident(formName) {
      this.dialogIncVisible = false
    },

    clearForm() {
      this.form.mobile = ''
      this.form.actId = ''
      this.form.couponId = ''
      this.form.incCode = ''
      this.form.couType = ''
      this.form.merOrderNo = ''
      this.form.orderAmt = ''
    },

    rev(formName) {
      const set = this.$refs
      set[formName].validate(valid => {
        if (valid) {
          this.$confirm('此操作将领取红包, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.listLoading = true
            this.dialogFormRandom = false
            this.dialogFormVisible = false
            couponRev(this.form.mobile, this.form.couponId, this.form.incCode, this.form.merOrderNo, this.form.orderAmt).then(response => {
              this.listLoading = false
              console.log(response)
              if (response.code === '200') {
                this.$notify({
                  title: '成功',
                  message: '领取成功',
                  type: 'success',
                  duration: 5000
                })
                this.clearForm()
              } else {
                this.$notify({
                  title: response.message,
                  message: '领取失败',
                  type: 'fail',
                  duration: 5000
                })
              }
            })
            this.form.resetTemp()
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>